import React from "react";
import { Form, Col, Input, Row, Button } from "antd";
import { MinusCircleOutlined } from "@ant-design/icons";

export default function accessoryGroup(values) {
  return (
    <Col span={24}>
      <Form.List name="accessoryGroups">
        {(fields, { add, remove }) => {
          return (
            <>
              <Row>
                <Col span={24}>
                  <div className="headlineClass">加料</div>
                </Col>
              </Row>

              {fields.map((field) => (
                <Row key={field.key}>
                  <Col span={10}>
                    <Row className="divfix">
                      <Col span={8} className="leftCommDiv">
                        加料名
                      </Col>
                      <Col span={16}>
                        <Form.Item
                          name={[field.name, "name"]}
                          fieldKey={[field.fieldKey, "name"]}
                          rules={[
                            { required: true, message: "Missing name" },
                            { type: "string", max: 10, message: "长度超出" },
                          ]}
                        >
                          <Input />
                        </Form.Item>
                      </Col>
                    </Row>
                  </Col>

                  <Col span={7}>
                    <Row className="divfix">
                      <Col span={8} className="leftCommDiv">
                        单价
                      </Col>
                      <Col span={16}>
                        <Form.Item
                          name={[field.name, "unitPrice"]}
                          fieldKey={[field.fieldKey, "unitPrice"]}
                          rules={[
                            { required: true, message: "Missing unitPrice" },
                            { pattern: /^[0-9 | .]+$/, message: "参数不合法" },
                            {
                              validator: async (_, values) => {
                                if (
                                  parseFloat(values) > 999.99 ||
                                  parseFloat(values) < 0.99
                                ) {
                                  return Promise.reject(
                                    new Error(
                                      "价格区域错误请输入0.99~999.99之间"
                                    )
                                  );
                                }
                              },
                            },
                          ]}
                        >
                          <Input />
                        </Form.Item>
                      </Col>
                    </Row>
                  </Col>

                  <Col span={7}>
                    <Row className="divfix">
                      <Col span={8} className="leftCommDiv">
                        计量单位
                      </Col>
                      <Col span={14}>
                        <Form.Item
                          name={[field.name, "unitOfMeasure"]}
                          fieldKey={[field.fieldKey, "unitOfMeasure"]}
                          rules={[
                            {
                              required: true,
                              message: "Missing unitOfMeasure",
                            },
                            { type: "string", max: 5, message: "长度超出" },
                          ]}
                        >
                          <Input />
                        </Form.Item>
                      </Col>
                      <Col span={2}>
                        <MinusCircleOutlined
                          style={{ fontSize: "30px", marginTop: 0 }}
                          onClick={() => remove(field.name)}
                        />
                      </Col>
                    </Row>
                  </Col>
                </Row>
              ))}
              <Form.Item>
                <Button
                  style={{ width: "100%", marginLeft: 20 }}
                  type="dashed"
                  onClick={() => add()}
                >
                  添加加料
                </Button>
              </Form.Item>
            </>
          );
        }}
      </Form.List>
    </Col>
  );
}
